<script lang="ts" setup>
import { UseTagsStore } from '@/stores/modules/tag'
import { HomeFilled, ArrowRightBold } from '@element-plus/icons-vue'
const uts = UseTagsStore()

</script>

<template>
  <div class="flex">
    <el-icon><HomeFilled /></el-icon> &nbsp;
    <div v-for="(tag, index) in uts.tagInfo" :key="index" v-if="uts.tagInfo.length == 1 || uts.tagInfo[1].path !== '/time'">
      <span class="taginfo" >{{ tag.name }}</span>
      <span class="jiantou" v-if="index < uts.tagInfo.length - 1">
        <el-icon><ArrowRightBold /></el-icon>
      </span>
    </div>
    <div v-for="(tag, index) in uts.timeTag" v-else>
      <span class="taginfo" >{{ tag.name }}</span>
      <span class="jiantou" v-if="index < uts.timeTag.length - 1">
        <el-icon><ArrowRightBold /></el-icon>
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  padding-left: 5px;
  height: 40px;
  margin: 20px 0;
  border: 1px solid #cbcbcb;
  // background-color: pink;。
  div {
    display: flex;
    align-items: center;
    .jiantou {
      height: 100%;
      display: inline-block;
      padding: 5px 10px 0 3px;
    }
    .taginfo {
      display: inline-block;
      cursor: pointer;
    }
  }
}
</style>
